<template>
    <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item title="标签名1" />
        <van-sidebar-item title="标签名2" />
        <van-sidebar-item title="标签名3" />
    </van-sidebar>
    <nav-bar />
</template>

<script>
    import {Sidebar,SidebarItem} from 'vant';
    import {reactive,toRefs,ref} from 'vue'
    import NavBar from '@/components/NavBar.vue'; // @ is an alias to /src
    export default {
        components:{
            NavBar,
            [Sidebar.name]:Sidebar,
            [SidebarItem.name]:SidebarItem
        },
        setup(){

            const state = reactive({
                activeKey:0
            })

            const onChange =value =>{
                console.log(value)
            }

            return {
                onChange,
                ...toRefs(state)
            }
        }
    }
</script>